<template>
  <el-row class="body" v-loading="loading">
    <el-col class="logoimg"> </el-col>
    <el-col class="logotext"> </el-col>
    <el-col class="logotext2"> </el-col>
    <el-form ref="form" :model="form" :rules="ruleForm" status-icon class="box">
      <el-form-item label="" prop="account" style="margin: 10px auto">
        <el-input
          type="text"
          clearable
          prefix-icon="el-icon-user"
          v-model="form.account"
          auto-complete="off"
          placeholder="请输入账号"
          placeholder-style="color:#fff;"
          style="
            width: 75vw;
            background: rgba(0, 0, 0, 0.1) !important;
          "></el-input>
      </el-form-item>
      <el-form-item label="" prop="password" style="margin: 10px auto">
        <el-input
          type="password"
          clearable
          prefix-icon="el-icon-lock"
          v-model="form.password"
          auto-complete="off"
          placeholder="请输入密码"
          placeholder-style="color:#fff;"
          style="width: 75vw"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          class="remember"
          v-model="remember"
          @change="rememberChange">
          记住密码
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          type="success"
          @click="submit"
          style="width: 75vw; margin-top: 8vh"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
  import router from "../router";
  // import { post } from "@/utils/http.js";
  export default {
    data() {
      return {
        loading: false,
        form: {
          account: "",
          password: "",
        },
        ruleForm: {
          account: [{ required: true, message: "请输入账号", trigger: "blur" }],
          password: [
            { required: true, message: "请输入密码", trigger: "blur" },
            {
              min: 6,
              max: 18,
              message: "长度在 6 到 18 个字符",
              trigger: "blur",
            },
          ],
        },
        btnDisabled: false,
        remember: false,
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        // this.remember =
        //   localStorage.getItem("isRemember") === "true" ? true : false;
        // if (this.remember) {
        //   this.form = JSON.parse(localStorage.getItem("info"));
        //   // console.log("🚀 ~ this.init ~ this.form", this.form);
        // } else {
        //   let info = JSON.parse(localStorage.getItem("info"));
        //   this.form.account = info.account;
        // }
      },
      submit() {
        // this.loading = true;
        // localStorage.setItem("info", JSON.stringify(this.form));
        // post("/api/user/login", this.form)
        //   .then((data) => {
        //     // console.log("🚀 ~ .then ~ response:", data);
        //     localStorage.setItem(
        //       "userInfo",
        //       JSON.stringify(data.data.userinfo)
        //     );
        //     this.loading = false;
        //     router.push("/options");
        //   })
        //   .catch(() => {
        //     this.loading = false;
        //   });
      },
      rememberChange(val) {
        // localStorage.setItem("isRemember", val);
      },
    },
  };
</script>

<style scoped>
  .box {
    margin-top: 5vh;
    display: flex;
    flex-direction: column;
    /* padding: 30px 50px; */
  }
  .body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    overflow: hidden; /* 防止内容溢出 */
  }
  .remember {
    float: left;
  }
  .el-checkbox {
    color: #ffffff;
  }

  /* 背景色设置为透明 */
  :deep(.el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
  }
  /* 输入框颜色 */
  :deep(.el-input__inner) {
    background-color: rgba(170, 169, 169, 0.4) !important;
    color: #fff;
  }
  /* 历史记录后自动补充的颜色 */
  :deep(input:-webkit-autofill) {
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-out 0.5s;
  }
  /* 提示框的字体颜色 */
  :deep(input::-webkit-input-placeholder) {
    color: #fff;
  }
  .logoimg {
    margin-top: 11vh;
    margin-left: 22vw;
  }
  .logotext {
    margin-top: 1.5vh;
    margin-left: 22vw;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 600;
  }
  .logotext2 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-top: 1.5vh;
    margin-left: 17vw;
  }
</style>
